<template>
  <div>
    <div class="production-item">
      <a-form
        :model="{}"
        :wrapper-col-props="{ span: 16 }"
        label-align="left"
        :label-col-props="{ span: 2 }"
      >
        <a-form-item :label="t['搜索']">
          <div>
            <a-input-search
              v-model="query.keyword"
              :placeholder="`${t['商品名称']},${t['条形码']},${t['部门']}`"
              search-button
              allow-clear
              @search="search"
              @keydown.enter="search"
              class="h-fit w-fit"
            ></a-input-search>
          </div>
        </a-form-item>
        <a-form-item :label="t['分类']" v-if="categoryList.length > 0">
          <div class="w-[200px]">
            <a-select
              v-model="query.category"
              allow-clear
              :options="categoryList"
              @change="search"
              v-if="categoryList.length > 0"
            >
            </a-select>
            <span v-else class="text-gray-500">
              {{ t["空"] }}
            </span>
          </div>
        </a-form-item>
        <a-form-item :label="t['数据范围']">
          <Scope
            :include="['-', '2', '1', '0']"
            type="radio"
            v-model="query.scope"
            @change="getList"
          />
        </a-form-item>
        <a-form-item :label="t['共享']">
          <a-button-group>
            <a-button v-for="(item, key) in shareOptions" :key="key" @click="item.action">
              {{ t[item.title] }}
            </a-button>
          </a-button-group>
        </a-form-item>

        <a-form-item :label="t['操作']">
          <BatchPriceAdjustmentOfGoods />
          <a-button type="outline" @click="manifestFile">
            {{ t["导出商品清单"] }}
            <IconExport />
          </a-button>
          <DeleteAll @confirm="confirm" />
        </a-form-item>
      </a-form>
    </div>

    <div class="flex gap-2">
      <a-button type="primary" @click="create">
        {{ t["新增"] }}
      </a-button>
      <a-button @click="getList" ghost> {{ t["刷新"] }} </a-button>
      <a-button @click="showColumnConfig">
        {{ t["列配置"] }}
      </a-button>

      <XDelete :disabled="selectedKeys.length <= 0" @ok="delByIds" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { manifestFile } from "@/api/service/goods/goods";
import { create, delByIds, getList, search } from "../data/curd";
import { shareOptions } from "../data/options";
import { categoryList, query, selectedKeys } from "../data/table";
import DeleteAll from "./DeleteAll.vue";

const t = translate("公共模块");

import BatchPriceAdjustmentOfGoods from "./BatchPriceAdjustmentOfGoods.vue";
const emit = defineEmits(["column", "confirm"]);

const showColumnConfig = () => {
  emit("column");
};
const confirm = () => {
  emit("confirm");
};
</script>

<style lang="scss" scoped>
.production-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 1rem 0;
}
</style>
